<template>
  <div id="index">
    <div v-title data-title="微信商场"></div>
<div class="search-container" @click="goSearch">
        <div class="m-topSearchIpt ipt">
            <i class="icon iconfont icon-search" ></i>
            <span class="placeholder">
                <span>搜索商品</span>
            </span>
        </div>
        <i class="icon iconfont icon-account"></i>
      </div>
    <swipe class="my-swipe">
      <swipe-item v-for="(items, index) in banners" :key="index" v-bind:style="{backgroundImage:'url('+items.image_url+')'}"></swipe-item>
    </swipe>


<div class="inter-nav">
  <ul>
  <router-link :to="item.url" v-for="(item, index) in channel" :key="index"> 
    <img :src="item.icon_url" />{{item.name}}</router-link>
 </ul>
</div>
  <div class="index_coupon">
    <router-link to="/"><img src="../../assets/coupon-1.jpg"></router-link>
    <router-link to="/"><img src="../../assets/coupon-2.jpg"></router-link>
    <router-link to="/"><img src="../../assets/coupon-3.jpg"></router-link>
  </div>
    <div class="new_goods clear">
      <router-link to="/"><img src="../../assets/fl-1.jpg"></router-link>
					<ul class="half-ul">
							<a href="#"><img src="../../assets/fl-2.jpg"></a>
							<a href="#"><img src="../../assets/fl-3.jpg"></a>
					</ul>
					<ul class="quarter-ul">
							<a href="#"><img src="../../assets/fl-4.jpg"></a>
							<a href="#"><img src="../../assets/fl-5.jpg"></a>
							<a href="#"><img src="../../assets/fl-6.jpg"></a>
							<a href="#"><img src="../../assets/fl-7.jpg"></a>
					</ul>
				</div>
<!-- 专区start -->
<div id="mayi_area" class="index_cont_ban " v-for="(item, index) in categoryList">
	<div class="index_title">
			<span>{{item.name}}</span>			
	</div>
    <img src="../../assets/active.jpg"/>
<div class="index_cont_scroll">
	<ul class="index-box_ul clearfix">
	
		<li class="index-box_li" v-for="goodsItem in item.goodsList">
			<router-link to="/item">
				<div class="index-box_item">
					<div class="index-box_img">
						<img class="hei-0 index-media-object" :src="goodsItem.list_pic_url">
					</div>
				</div>
				<div class="index-box_text">
					<div class="index-box_title">
						<p class="index-box_name">{{goodsItem.name}}</p>
					</div>
					<div class="index-box_price">
						<span class="group_price">￥{{goodsItem.retail_price}}</span>
					</div>
				</div>
			</router-link>
		</li>
    
    <li class="index-box_li">
      <span class="more-goods">
        查看更多
        <i>MORE</i>
      </span>
    </li>
	</ul>
</div>
</div>
<!-- 专区end -->


<div class="recommend">
  <h2>今日推荐</h2>
  <div class="recommend-img clear">
    <div class="half-per">
      <div class="col-6">
        <img :src="topicList[0].item_pic_url"/>
      </div>
      <div class="col-3">
        <img :src="topicList[1].item_pic_url"/>
        <img :src="topicList[2].item_pic_url"/>
      </div>
    </div>
    <div class="half-per" >
      <div class="col-6">
        <img :src="topicList[0].item_pic_url"/>
      </div>
      <div class="col-3">
        <img :src="topicList[1].item_pic_url"/>
        <img :src="topicList[2].item_pic_url"/>
      </div>
    </div>
    
  </div>
  
  <h2>浏览历史</h2>
  <div class="recommend-img clear">
    <div class="half-per">
      <div class="col-6">
        <img :src="newGoodsList[0].list_pic_url"/>
      </div>
      <div class="col-3">
        <img :src="newGoodsList[1].list_pic_url"/>
        <img :src="newGoodsList[2].list_pic_url"/>
      </div>
    </div>
    <div class="half-per" >
      <div class="col-6">
        <img :src="newGoodsList[0].list_pic_url"/>
      </div>
      <div class="col-3">
        <img :src="newGoodsList[1].list_pic_url"/>
        <img :src="newGoodsList[2].list_pic_url"/>
      </div>
    </div>
    
  </div>
</div>
    <foot-guide></foot-guide>
  </div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import footGuide from '@/components/footer.vue'
import { Swipe, SwipeItem } from 'vue-swipe';
export default {
  name: 'index',
  components: {
    'header-bar': HeaderBar,
    footGuide,
    'swipe': Swipe,
    'swipe-item': SwipeItem
  },
  data () {
    return {
      selected: '排行',
      list: [],
      banners: [],
      channel: [],
      categoryList: [],
      topicList: [],
      newGoodsList: []
    }
  },
  created () {
    this.getIndexData()
  },
  methods: {
    getIndexData () {
      var self = this
      this.$http.post(this.url)
        .then(function (response) {
          if (response.data.errno === 0) {
            self.banners = response.data.data.banner;
            self.channel = response.data.data.channel;
            self.categoryList = response.data.data.categoryList;
            self.topicList = response.data.data.topicList;
            self.newGoodsList = response.data.data.newGoodsList;
            console.log(response.data.data.banner);
          }
        })
      .catch((err) => {
        console.log(err);
        self.$toast('网络请求超时');
      });
    },
    changeSelected (data) {
      this.selected = data
    },
    goSearch () {
      this.$router.push('/search')
    }
  }
}
</script>
<style lang="scss">
@import 'index.scss'
</style>

